import { createApp, defineAsyncComponent } from "vue";

//全局引入状态管理pinia
import { createPinia } from "pinia";

//pinia持久化
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

//全局引入ElementPlus
import ElementPlus from "element-plus";

//全局引入ElementPlus 样式
import "element-plus/dist/index.css";

//国际化，中文显示
import zhCn from "element-plus/es/locale/lang/zh-cn";

//全局图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue";

//全局样式
import "@/style.css";

//animate.css动画库 npm install animate.css
import "animate.css";

//引入弹框
import { msg, box } from "@/utils/message";

//引入加载
import { open, close } from "@/utils/loading";

//加密 解密
import { encrypt, decrypt } from "@/utils/encrypt";

//引入App组件
import App from "@/App.vue";

//引入路由
import { router, removeRoute } from "@/router";

//引入store
import { authStore, userStore } from "@/store";

//引入mitt
import { emitter } from "@/utils/emitter";

//引入规则
import { rule } from "@/utils/rule";

//引入http请求
import { baseURL, axios, http } from "@/utils/http";

//引入自定义指令
import { hasPermission } from "@/utils/directive";

//引入组件
const app = createApp(App);

//使用路由
app.use(router);

//使用ElementPlus
app.use(ElementPlus, { size: "large", zIndex: 3000, locale: zhCn });

//全局图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}

//使用pinia
app.use(createPinia().use(piniaPluginPersistedstate));

/**
 * 异步注册自定义全局组件
 */
//级联组件
app.component(
    "lemon-cascader",
    defineAsyncComponent(() => import("@/components/LemonCascader.vue"))
);
//城市组件
app.component(
    "lemon-city",
    defineAsyncComponent(() => import("@/components/LemonCity.vue"))
);
//图标组件
app.component(
    "lemon-icon",
    defineAsyncComponent(() => import("@/components/LemonIcon.vue"))
);
//图片组件
app.component(
    "lemon-image",
    defineAsyncComponent(() => import("@/components/LemonImage.vue"))
);
//表单组件-添加表单
app.component(
    "lemon-form",
    defineAsyncComponent(() => import("@/components/LemonForm.vue"))
);
//上传组件
app.component(
    "lemon-image-upload",
    defineAsyncComponent(() => import("@/components/LemonImageUpload.vue"))
);
//弹窗组件
app.component(
    "lemon-dialog",
    defineAsyncComponent(() => import("@/components/LemonDialog.vue"))
);
//Tag组件
app.component(
    "lemon-tag",
    defineAsyncComponent(() => import("@/components/LemonTag.vue"))
);
//表格组件
app.component(
    "lemon-table",
    defineAsyncComponent(() => import("@/components/LemonTable.vue"))
);
//分页组件
app.component(
    "lemon-page",
    defineAsyncComponent(() => import("@/components/LemonPage.vue"))
);
//搜索组件
app.component(
    "lemon-search",
    defineAsyncComponent(() => import("@/components/LemonSearch.vue"))
);
//通用组件
app.component(
    "lemon-common",
    defineAsyncComponent(() => import("@/components/LemonCommon.vue"))
);

//挂载全局方法
app.provide("method", {
    baseURL,
    emitter,
    rule,
    router,
    removeRoute,
    authStore: authStore(),
    userStore: userStore(),
    axios,
    http,
    msg,
    box,
    open,
    close,
    encrypt,
    decrypt,
});

//挂载自定义指令
app.directive("has-permission", hasPermission); //权限指令

//挂载全局组件
app.mount("#app");

//设置title
document.title = import.meta.env.VITE_APP_TITLE;
